import React, { useState } from 'react';
import { Card, Button, Input, Avatar, PersonIcon, ShareIcon, ClockIcon, MoneyIcon } from '@repo/ui';
import { useUserState } from '../../stores';
import { getRoleDisplayName } from '../../utils/roleUtils';
import RechargeDialog from '../../components/Dialogs/recharge-dialog';
import styles from './ProfilePage.module.css';

const ProfilePage: React.FC = () => {
  const { userInfo } = useUserState();
  
  const [isEditing, setIsEditing] = useState(false);
  const [isRechargeDialogOpen, setIsRechargeDialogOpen] = useState(false);
  const [showTooltip, setShowTooltip] = useState(false);
  
  const [formData, setFormData] = useState({
    email: userInfo?.email || '',
    nickname: userInfo?.nickname || '',
    phone: userInfo?.phone || ''
  });

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleSave = () => {
    // TODO: 实现用户信息更新
    console.log('保存用户信息:', formData);
    setIsEditing(false);
  };

  const handleCancel = () => {
    setFormData({
      email: userInfo?.email || '',
      nickname: userInfo?.nickname || '',
      phone: userInfo?.phone || ''
    });
    setIsEditing(false);
  };


  const handleRechargeClick = () => {
    setIsRechargeDialogOpen(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h1>个人资料</h1>
        <p>管理您的个人信息和账户设置</p>
      </div>

      <div className={styles.content}>
        {/* 头像和基本信息 - 铭牌式设计 */}
        <Card className={styles.profileCard}>
          <div className={styles.profileBadge}>
            <Avatar
              userName={userInfo?.username || 'User'}
              userEmail={userInfo?.email || ''}
              avatarUrl={userInfo?.avatar || undefined}
              size="xl"
              className={styles.avatar}
            />
            <div className={styles.badgeContent}>
              <div className={styles.badgeHeader}>
                <h2 className={styles.badgeName}>{userInfo?.nickname || userInfo?.username || '用户'}</h2>
                {userInfo?.membership_level && (
                  <div className={styles.membershipBadge}>
                    <ShareIcon size={14} />
                    <span>{userInfo.membership_level.toUpperCase()}</span>
                  </div>
                )}
              </div>
              <p className={styles.badgeUsername}>@{userInfo?.username}</p>
              <div className={styles.badgeInfo}>
                <div className={styles.badgeInfoItem}>
                  <span className={styles.badgeInfoLabel}>ID</span>
                  <span className={styles.badgeInfoValue}>{userInfo?.user_id}</span>
                </div>
                <div className={styles.badgeInfoItem}>
                  <span className={styles.badgeInfoLabel}>角色</span>
                  <span className={styles.badgeInfoValue}>{getRoleDisplayName(userInfo?.role || '')}</span>
                </div>
                <div className={styles.badgeInfoItem}>
                  <span className={styles.badgeInfoLabel}>积分</span>
                  <div className={styles.pointsContainer}>
                    <span className={styles.badgeInfoValue}>{userInfo?.points}</span>
                    <div 
                      className={styles.moneyButtonWrapper}
                      onMouseEnter={() => setShowTooltip(true)}
                      onMouseLeave={() => setShowTooltip(false)}
                    >
                      <button 
                        className={styles.moneyButton}
                        onClick={handleRechargeClick}
                      >
                        <MoneyIcon size={16} />
                      </button>
                      {showTooltip && (
                        <div className={styles.tooltip}>
                          充值积分
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Card>

        {/* 详细信息表单 */}
        <Card className={styles.detailsCard}>
          <div className={styles.section}>
            <div className={styles.sectionHeader}>
              <div className={styles.sectionTitle}>
                <PersonIcon size={20} />
                <h3>基本信息</h3>
              </div>
              {!isEditing && (
                <Button
                  variant="outline"
                  onClick={() => setIsEditing(true)}
                  className={styles.editButton}
                >
                  编辑资料
                </Button>
              )}
            </div>
            
            <div className={styles.formGrid}>
              <div className={styles.formField}>
                <label>邮箱</label>
                <Input
                  type="email"
                  value={formData.email}
                  onChange={(e) => handleInputChange('email', e.target.value)}
                  disabled={!isEditing}
                  placeholder="输入邮箱地址"
                />
              </div>
              
              <div className={styles.formField}>
                <label>昵称</label>
                <Input
                  value={formData.nickname}
                  onChange={(e) => handleInputChange('nickname', e.target.value)}
                  disabled={!isEditing}
                  placeholder="输入昵称"
                />
              </div>
              
              <div className={styles.formField}>
                <label>手机号</label>
                <Input
                  value={formData.phone}
                  onChange={(e) => handleInputChange('phone', e.target.value)}
                  disabled={!isEditing}
                  placeholder="输入手机号"
                />
              </div>
            </div>
          </div>


          {isEditing && (
            <div className={styles.actions}>
              <Button variant="outline" onClick={handleCancel}>
                取消
              </Button>
              <Button onClick={handleSave}>
                保存更改
              </Button>
            </div>
          )}
        </Card>

        {/* 账户统计 */}
        <Card className={styles.statsCard}>
          <div className={styles.sectionHeader}>
            <div className={styles.sectionTitle}>
              <ShareIcon size={20} />
              <h3>账户统计</h3>
            </div>
          </div>
          
          <div className={styles.statsGrid}>
            <div className={styles.statItem}>
              <div className={styles.statValue}>{userInfo?.upload_count || 0}</div>
              <div className={styles.statLabel}>上传次数</div>
            </div>
            <div className={styles.statItem}>
              <div className={styles.statValue}>{userInfo?.download_count || 0}</div>
              <div className={styles.statLabel}>下载次数</div>
            </div>
            <div className={styles.statItem}>
              <div className={styles.statValue}>{userInfo?.points || 0}</div>
              <div className={styles.statLabel}>积分余额</div>
            </div>
          </div>
        </Card>

        {/* 登录信息 */}
        <Card className={styles.statsCard}>
          <div className={styles.sectionHeader}>
            <div className={styles.sectionTitle}>
              <ClockIcon size={20} />
              <h3>登录信息</h3>
            </div>
          </div>
          
          <div className={styles.loginInfoGrid}>
            <div className={styles.loginInfoItem}>
              <div className={styles.loginInfoLabel}>最后登录IP</div>
              <div className={styles.loginInfoValue}>{userInfo?.last_login_ip || '未知'}</div>
            </div>
            
            <div className={styles.loginInfoItem}>
              <div className={styles.loginInfoLabel}>账户创建时间</div>
              <div className={styles.loginInfoValue}>
                {userInfo?.created_at ? new Date(userInfo.created_at).toLocaleString() : '未知'}
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* 充值弹窗 */}
      <RechargeDialog
        isOpen={isRechargeDialogOpen}
        onClose={() => setIsRechargeDialogOpen(false)}
      />
    </div>
  );
};

export default ProfilePage;
